 <template>
  <div>
    <el-row type="flex" :gutter="20" style="padding-left: 20px; margin-bottom: 8px">
      <el-col :span="20">
        <h2 class="subtitle" style="margin-top: 23px;margin-left: 5px">
          <el-button type="text" @click="goback"><i class="el-icon-back subtitle" style="margin-top: 8px"></i></el-button>
          个人资料修改
        </h2>
      </el-col>
    </el-row>
    <hr style="border-bottom: none;border-color: #8c939d"/>
    <el-row style="margin-top: 5vh">
      <el-col :span="18" :offset="2">
        <el-form :model="form" :rules="rules" ref="form">
          <div>
            <el-row>
              <el-form-item :label-width="formLabelWidth" prop="userName">
                <span slot="label" class="form-title">
                  姓名
                </span>
                <el-input v-model="form.userName"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item :label-width="formLabelWidth">
            <span slot="label" class="form-title">
                  头像
            </span>
                <el-row :gutter="20">
                  <el-col :span="4">
                    <el-image
                      style="width: 10vw; height: 15vh"
                      :src="form.url"
                      :fit=fill
                      v-if="form.url!=''">
                    </el-image>
                  </el-col>
                  <el-col :span="15" style="margin-top: 15px">
                    <el-button @click="handleUpLoad" class="el-blue-button" style="float: left;margin-left: 5%; margin-top: 10%;">浏览</el-button>
                    <input ref="inputUpLoad" v-show="false" type="file" accept="*" @change="handleFile"/>
                    <el-button @click='deletePic' class="el-blue-button" style="float: left;margin-left: 3%; margin-top: 10%;">删除</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item :label-width="formLabelWidth" prop="introduction">
                <span slot="label" class="form-title">
                  人员介绍
                </span>
                <el-input type = "textarea" v-model="form.introduction" :autosize="{ minRows: 3, maxRows: 8}"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" prop="resume">
                <span slot="label" class="form-title">
                  工作经历
                </span>
                  <el-input type = "textarea" v-model="form.resume" :autosize="{ minRows: 3, maxRows: 8}"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </el-col>
    </el-row>
    <el-row type="flex" justify="end" style="margin-right:14vw" :gutter="20">
      <el-col :span="3">
        <el-button @click="submitForm()" class="el-green-button" style="float: right">
          <i class="el-icon-check"></i>保存
        </el-button>
      </el-col>
      <el-col :span="2">
        <el-button @click="cancel()" class="el-red-button">
          <i class="el-icon-close"></i>取消
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/network/request'
import { baseURL } from '../../../../config/baseConfig'

export default {
  name: 'index',
  data () {
    const form = {
      id: 1,
      userName: 'ahh',
      introduction: 'ahhhh',
      resume: 'ahhhhh',
      url: '',
      position: '',
      status: '',
      filename: ''
    }
    return {
      form,
      dialogKind: 0, // 0:修改信息dialog；1：增加信息dialog
      userName: '',
      userDialogForm: false,
      addDialogForm: false,
      formLabelWidth: '120px',
      file: '',
      change: false,
      rules: {
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '请输入人员介绍', trigger: 'blur' }
        ],
        resume: [
          { required: true, message: '请输入工作经历', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.form.id = this.$route.params.id
    this.form.userName = this.$route.params.name
    this.form.introduction = this.$route.params.introduction
    this.form.resume = this.$route.params.resume
    if (this.$route.params.filepath !== '') {
      this.form.url = baseURL + '/' + this.$route.params.filepath
    } else {
      this.form.url = this.$route.params.filepath
    }
    this.form.position = this.$route.params.position
    this.form.status = this.$route.params.status
    this.form.filename = this.$route.params.filename
    console.log(this.form.url)
  },
  methods: {
    handleUpLoad () {
      this.$refs.inputUpLoad.click()
    },
    handleFile () {
      this.change = true
      let reader = new FileReader()
      this.file = event.target.files[0]
      reader.readAsDataURL(event.target.files[0])
      reader.onload = () => {
        this.form.url = reader.result
        console.log('src', this.form.url)
        reader.abort()
        reader = null
      }
    },
    goback () {
      this.$router.back(-1)
    },
    deletePic () {
      this.$confirm('此操作将删除用户的附件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          method: 'post',
          url: '/crew/deletecrewpics',
          params: {
            id: this.form.id,
            filename: this.form.filename,
            randomID: this.$store.state.user.userId
          }
        }).then((res) => {
          console.log(res)
          if (res.status === 200) {
            this.form.url = ''
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message.error('删除失败!')
          }
        })
      }).catch(() => {

      })
    },
    cancel () {
      this.form.userName = this.$route.params.name
    },
    submitForm () {
      const that = this
      this.$confirm('将保存修改后的员工信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          method: 'post',
          url: '/crew/updatecrewmem',
          params: {
            id: this.form.id,
            position: this.form.position,
            name: this.form.userName,
            introduction: this.form.introduction,
            resume: this.form.resume,
            status: this.form.status,
            randomID: this.$store.state.user.userId
          }
        }).then((res) => {
          if (res.data.code === 200) {
            const formData = new FormData()
            formData.append('id', that.form.id)
            formData.append('file', that.file)
            formData.append('randomID', this.$store.state.user.userId)
            if (that.change) {
              request({
                method: 'post',
                url: '/crew/uploadcrewpics',
                data: formData
              }).then((res) => {
                console.log(res)
                if (res.status === 200) {
                  that.$message({
                    type: 'success',
                    message: '保存成功!'
                  })
                } else {
                  that.$message.error('保存失败!')
                }
              })
            } else {
              that.$message({
                type: 'success',
                message: '保存成功!'
              })
            }
          } else {
            this.$message.error('保存失败!')
          }
        })
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="scss">
.el-textarea__inner,
.el-textarea {
  background-color: rgb(14, 16, 54);
}
</style>
